<template>
  <div class="cinema-Add">
    <el-card class="box-card">
      <div slot="header" class="header">
        <span>编辑影院</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 级联 -->
        <el-form-item label="城市区域">
    
          <cascadeCinema :cityId="form.cityId" :areaId="form.areaId"  @getData="getData"></cascadeCinema>
        </el-form-item>
        <el-form-item label="城市编号">
          <el-input v-model="form.cityId" disabled  placeholder="城市编号"></el-input>
        </el-form-item>
        <el-form-item label="地区编号">
          <el-input v-model="form.areaId" disabled placeholder="地区编号"></el-input>
        </el-form-item>
        <el-form-item label="影院名称">
          <el-input v-model="form.name" placeholder="影院名称"></el-input>
        </el-form-item>
        <el-form-item label="影院地址">
          <el-input v-model="form.address" placeholder="影院地址"></el-input>
        </el-form-item>
        <el-form-item label="最低价格">
          <el-input v-model="form.lowPrice" placeholder="最低价格"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">立即编辑</el-button>
          <el-button @click="clear">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import cascadeCinema from "@/components/cascade/cascadeCinema";
export default {
  components: {
    cascadeCinema
  },
  data() {
    return {
      form: {       
       
        cityId: "",
        cityName: "",
        areaId: "",        
        
        address: "",
        lowPrice: ""
        ,areaName:"",
      clearArr:[]

      },
      loading:false,
      // clearText:false //清楚按钮
    };
  },
  created() {
    console.log("编辑参数",this.$route.params.cinemaId)
    const cinemaId=this.$route.params.cinemaId
    this.getInfoCinema(cinemaId)
  },
  methods: {
  //取消按钮
  clear(){

      this.$router.push('/cinema/list')
  },

   getInfoCinema(cinemaId){    
       const url = '/cinema/getDetail?cinemaId='+cinemaId
      this.$axios.get(url).then(res=>{ 
        this.form=res.cinema       
         console.log("编辑的数据",res)      
      }).catch(err=>{
         this.$message.error("获取数据失败")
        console.log("获取数据失败：",err)
        
      })

   },
//获取子组件传来的参数
  getData(res){
    console.log("获取子组件传来的参数",res)
    this.form.cityId=res[0];
    this.form.areaId=res[1];
    
  },

    onSubmit() {
      this.loading=true
        console.log("this.form",this.form)
        const url="/cinema/edit"
        this.$axios.post(url,this.form).then(res=>{
          this.$message.success("修改数据成功")              
            this.loading=false
             var $this=this //注意定定时器里，this指向的是Window,但我们需要指向VueComponent
             setTimeout(function(){          
               console.log("$this",$this)
               $this.$router.push('/cinema/list')
             },3000)


            console.log(res)
        }).catch(err=>{
            this.$message.error('错误啦',err)
             this.loading=false
           console.log('错误啦',err)
        })
      console.log("submit!");
    }
  }
};
</script>
<style lang="less">
.cinema-Add {
  .el-card__body {
    height: 85vh;
  }
}
</style>
<style lang="less" scoped>
.el-form {
  width: 500px;
}
.header {
  font-size: 22px;
}
</style>